<template>
  <div class="clearfix wrapper">
    <a-input @keyup.enter="enter" style="width: 95px;" :size="size" :value="start" @change="changeStart"></a-input>-
    <a-input @keyup.enter="enter" style="width: 95px;" :size="size" :value="end" @change="changeEnd"></a-input>
  </div>
</template>

<script>
export default {
  name: 'RangeInput',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  data () {
    return {
      start: '',
      end: ''
    }
  },
  methods: {
    changeStart (e) {
      this.start = e.target.value
      this.$emit('change', [this.start, this.end])
    },
    changeEnd (e) {
      this.end = e.target.value
      this.$emit('change', [this.start, this.end])
    },
    enter () {
      this.$emit('enter')
    }
  },
  watch: {
    value: {
      handler (newValue, oldValue) {
        if (newValue.length) {
          this.start = newValue[0]
          this.end = newValue[1]
        } else {
          this.start = ''
          this.end = ''
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    display inline-block
</style>
